
<html>
<head>
<base href="<=basePath>">

<title>确认订单</title>

<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="/js/jquery.js"></script>
<script type="text/javascript">
	//复选按钮计算总金额
	function jisuanTotal() {
		//获取所有的复选按钮
		var chks = document.getElementsByName("pid");
		var total = 0;
		for (var i = 0; i < chks.length; i++) {
			//判断复选按钮是否被选中
			if (chks[i].checked == true) {
				var pid = chks[i].value;
				var xiaoji = document.getElementById("td_" + pid).innerHTML;
				//alert(xiaoji);

				total += parseInt(xiaoji);
			}
		}
		//为合计赋值
		document.getElementById("total_txt").value = total.toFixed(2);
		//${total } = total;
	}
	
	//改变地址
	function changeAddress(op) {
		if (op == true) {
			document.getElementById("oldAddressDiv").style.display = "none";
			document.getElementById("newAddressDiv").style.display = "block";
		} else {
			document.getElementById("oldAddressDiv").style.display = "block";
			document.getElementById("newAddressDiv").style.display = "none";
		}
	}
	
	//全选按钮的选中
	function selall( op ){
		var chks =document.getElementsByName("pid");
		for(var i = 0;i<chks.length;i++){
			chks[i].checked = op;
		}
	}
</script>

<style type="text/css">
a { text-decoration: none; color: black;}
a:hover {color: #FF7E00;}
/* 顶部菜单导航栏 */
#topbar {background-color: #3B3B3B;width: 1890px;height: 40px;}
.sep {color: #3B3B3B}
#topbar a {text-decoration: none;color: #BDBDBD;font-family: 黑体;font-size: 14px;}
#topbar a:hover {color: white;}
#topbar_left {width: 700px;margin-left: 350px;padding-top: 10px;float: left;}
#topbar_right {width: 400px;margin-left: 1300px;padding-top: 10px;}
/* 确认订单 */
#pay_title {background-color: white;width: 1890px;height: 95px;}
#logo {float: left;width: 60px;margin-left: 350px;padding-top: 20px;}
#pay_text {width: 700px;margin-left: 500px;padding-top: 30px;}
#hr {height: 2px;border: none;border-top: 2px solid #FF7E00;margin-top: 25px;}
#pay {background-color: white;width: 1226px;height: 100px;margin-left: 350px;}
#pay a {text-decoration: none;font-family: 黑体;font-size: 20px;color: black;}
#pay a:hover {color: #FF7E00;}
#pay_left {width: 400px;padding-top: 25px;margin-left: 40px;float: left;}
#pay_right {width: 550px;height: 40px;margin-left: 700px;padding-top: 25px;}
#total_span {color: #FF7E00;}
#total_num {font-size: 40px;}
#total_txt {border: 0px solid #EDEDED;width: 120px;height: 50px;line-height: 50px;font-size: 30px;color: #FF7E00;}
#paybtn {background-color: #FF7E00;width: 150px;height: 50px;line-height: 50px;border: 1px solid #EDEDED;cursor: pointer;font-size: 20px;font-family: 黑体;}
/* 收货地址 */
#address {background-color: white;width: 1226px;margin-left: 350px;text-align: center;}
#oldAddressDiv {width: 600px;margin: 0px auto;text-align: center;}
/* 备注信息 */
#beizhu {background-color: white;width: 1226px;height: 180px;margin-left: 350px;text-align: center;}
/* 购物车 */
#carshop {background-color: white;width: 1226px;margin-left: 350px;}
#carshop hr {border: 1px solid #EDEDED;}
/* 尾部 */
#foot {width: 1890px;}
</style>
</head>

<body style=" background-color: #EDEDED; font-family: 黑体; ">
	<div id="app">
		<!-- 顶部菜单导航栏 -->
		<div id="header">
			<div id="topbar">
				<div id="topbar_left">
					<a href="/prod/show5.action">小米商城</a><span class="sep">|</span>
					<a href="" target="_blank">MIUI</a><span class="sep">|</span>
					<a href="" target="_blank">米聊</a><span class="sep">|</span>
					<a href="" target="_blank">游戏</a><span class="sep">|</span>
					<a href="" target="_blank">多看阅读</a><span class="sep">|</span>
					<a href="" target="_blank">云服务</a><span class="sep">|</span>
					<a href="" target="_blank">金融</a><span class="sep">|</span>
					<a href="" target="_blank">米币</a><span class="sep">|</span>
					<a href="" target="_blank">手机版</a><span class="sep">|</span>
					<a href="" target="_blank">问题反馈</a>
				</div>
				<div id="topbar_right">
						<a href="login.jsp">登陆</a>
						<span class="sep">|</span>
						<a href="">${user.uname}</a>
						<span class="sep">|</span>
						<a href="/fore/logout.action">注销</a>
						<span class="sep">|</span>
						<a href="/fore/showOrder.action" target="_blank">我的订单</a>
						<span class="sep">|</span>
						<a href="/fore/showCarShop.action" target="_blank">购物车</a>
						<span class="sep">|</span>
					<a href="register.jsp" target="_blank">注册</a><span class="sep">|</span>
				</div>
			</div>
		</div>

		<!-- 确认订单 -->
		<div id="pay_title">
			<div id="logo">
				<a href="">
					<img alt="" src="/image/milogo.jpg"
						 onmouseover="this.src='/image/milogo2.jpg'"
						 onmouseout="this.src='/image/milogo.jpg'"></a>
			</div>
			<div id="pay_text">
				<span style="font-family: 黑体;font-size: 34px;">确认订单</span>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<span style="font-family: 黑体;font-size: 16px;">温馨提示：请在1小时内完成支付，否则订单将被关闭哦</span>
			</div>
			<hr id="hr">
		</div>
		<br>

		<form action="/toPay" method="get">
			<!-- 收货地址 -->
			<div id="address">
				<br><br>
				<span style="font-family: 黑体;font-size: 30px;">&nbsp;选择收货地址</span>
				<!--
            <span style="font-family: 黑体;font-size: 24px;">新增收货地址</span>
            -->
				<br><br>
				<hr>
				<div id="oldAddressDiv">
					<table border="0px" width="600" style="text-align: center;">
						<tr>
							<td>地址</td>
							<td>收货人</td>
							<td>电话</td>
						</tr>
						<tr v-for="add in addresses">
							<td width="300px;" height="50px;" style="text-align: left;">&nbsp;
								<input type="radio"	name="addressId"  :value="add.addressid"/>
								<span style="font-size: 22px;">{{add.address }}</span>
                            </td>
							<td width="100px;">{{add.cnee}}</td>
							<td width="100px;">{{add.phone}}</td>
						</tr>
					</table>
				</div>
				<br>
			</div>
			<br>

			<!-- 备注信息 -->
			<div id="beizhu">
				<br>
				<br> <span style="font-family: 黑体;font-size: 24px;">&nbsp;输入备注信息</span><br>
				<br> &nbsp;
				<textarea rows="3" cols="100"
						  onmouseover="this.style.borderColor='#FF7E00';"
						  onmouseout="this.style.borderColor='#EDEDED';">11</textarea>
			</div>
			<br>

			<!-- 购物车 -->

			<div id="carshop">
				<table border="0px" width="1226" style="text-align: center;">
					<tr>
						<td>选择</td>
						<td height="70px;">图片</td>
						<td>名称</td>
						<td>型号</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
					</tr>

						<tr>
							<td colspan="7"><hr></td>
						</tr>
						<tr style="font-size: 18px;" v-for="p in products">
							<td width="50">
								<!--<input type="checkbox" name="pid" value="${car.prod.pId }" checked="checked"-->
									   <!--onclick="jisuanTotal()" /></td>-->
							<td width="100" height="150">
								<img alt="" :src="'/image/'+p.pImage" style="height: 150px;"></td>
							<td width="126"><a href="">{{p.pName}}</a></td>
							<td width="400"><a href="">{{p.pContent}}</a></td>
							<td width="100">{{p.pPrice}}元</td>
							<td width="200">1件</td>
							<td width="130" style="color: #FF7E00;" id="">{{p.pPrice}}元</td>
						</tr>

				</table>
			</div>
			<br>

			<!-- 支付栏 -->
			<div id="pay">
				<div id="pay_left">
					<a href="index.jsp"
					   style="display: block; width: 150px; height: 50px; line-height: 50px; background-color: #FF7E00; font-size: 20px; text-align: center;"
					   onmouseover="this.style.color='white';"
					   onmouseout="this.style.color='black';"> 继续购物</a>
				</div>
				<div id="pay_right">
					<span>活动优惠：减0元&nbsp;&nbsp;</span>
					<span id="total_span">合计：
				<input type="text" id="total_txt" name="total" readonly="readonly" :value="total">{{total}}</span>
					<span>
				<input type="submit" value="立即支付" id="paybtn" onmouseover="this.style.color='white';"
					   onmouseout="this.style.color='black';" @click="toPay()"></span>
				</div>
			</div>
			<br>
		</form>

		<div>
			<img alt="" src="image/carshop_tj.jpg" width="1890px;">
		</div>

		<!-- 尾部 -->
		<div id="foot">
			<img alt="" src="image/foot.jpg" width="1890px;">
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
        new Vue({
            el: "#app",
            data:{
                products:[],
                total: 0.0,
                addresses:[],
                selectAddId: ''
            },
            methods:{
                // toPay:function () {
                //     //1.获取被选中的地址那个<input>标签
                //     var element = document.querySelector("#oldAddressDiv input:checked");
                //     console.log(element.value)
                //     axios({
                //         method:"GET",
                //         url: "toPay?total="+this.total+"&addressId="+ element.value
                //     }).then(resp=>{
                //         alert("请求发送成功")
                //     })
                // }
            },
			created(){
                //1.查询用户地址列表
				axios({
					method: "GET",
					url: "address"
				}).then(resp=>{
				    if(resp.data.code == 200){
				        this.addresses = resp.data.data;
				        console.log(this.addresses)
					}
				})

				//2.查询购物车
                axios({
                    method: "GET",
                    url: "findCartShop"
                }).then(resp=>{
                    if (resp.data.code == 200){
                        this.products = resp.data.data;
                        //计算一下总价格
                        this.products.forEach((p)=>{
                            this.total += p.pPrice;
                        })
                        console.log(this.products)
                    }
                })
			}
        })
	</script>

</body>
</html>
